<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Аттестат - оценки</title>

  <style type="text/css">

    :root {
      /* disciplines-width */ --first-td-width: 84mm;
      /* marks-width */ --second-td-width: 40mm;
    }

    body {
      margin: 0;
      /* body-width */ width: 290mm;
      /* body-height */ height: 205mm;
      overflow-y: hidden;
    }

    #back {
      position: absolute;
    }

    tbody {
      max-height: inherit;
      height: inherit;
      overflow-y: auto;
      display: block;
    }

    tr,
    td,
    thead,
    tbody {
      vertical-align: top;
      border-collapse: collapse;
      height: 100%;
    }

    table,
    tr,
    td {
      margin: 0px;
      padding: 0px;
      border: none;
      border-collapse: collapse;
      outline: 0;
    }

    #back {
      z-index: -1;
      /* back-width */ width: 290mm;
      /* back-height */ height: 205mm;
    }

    tr {
      /* tr-height */ height: 10mm;
    }

    .z {
      position: relative;
      display: inline-block;
      overflow: visible;
      margin: 0;
      height: 100%;
      background-image: url("file:///PROJECT_FOLDER_PLACEHOLDER/blancs/z.png");
      background-repeat: no-repeat;
      background-position-x: center;
      background-size: contain;
    }

    .table-and-z {
      /* table-height */ height: 180mm;
      width: calc(var(--first-td-width) + var(--second-td-width));
      /* table-top */ top: 22mm;
      float: left;
      flex-direction: column;
      display: flex;
      justify-content: flex-end;
      position: absolute;
    }

    #table-and-z1 {
      /* first-marks-left */ left: 14mm;
    }

    #table-and-z2 {
      /* second-marks-left */ left: 153mm;
    }

    tr td:first-child {
      width: var(--first-td-width);
      text-align: left;
    }

    tr td:last-child {
      width: var(--second-td-width);
      text-align: center;
    }
  </style>
</head>

<body>

  <img src="file:///PROJECT_FOLDER_PLACEHOLDER/blancs/marks.jpg" id="back">

  <div id="table-and-z1" class="table-and-z">
    <table id="marks1" class="marks">
      MARKS_PLACEHOLDER
    </table>
    <div id="z1" class="z">

    </div>
  </div>
  <div id="table-and-z2" class="table-and-z">
    <table id="marks2" class="marks">
      MARKS2_PLACEHOLDER
    </table>
    <div id="z2" class="z">

    </div>
  </div>
</body>

</html>